<template>
  <div class="talentDetails_box">
    <el-form :inline="true" :model="details" class="demo-form-inline">
      <el-form-item label="人才编号">
        <el-input placeholder="请输入人才编号" v-model="details.identifier" clearable></el-input>
      </el-form-item>

      <el-form-item label="人才姓名">
        <el-input v-model="details.name" placeholder="人才姓名" clearable></el-input>
      </el-form-item>

      <el-form-item v-if="flag">
        <el-button type="primary" @click="exportPdf">导出</el-button>
      </el-form-item>
    </el-form>

    <div ref="pdf">
      <el-descriptions class="margin-top" :title="personnel.name" :column="1" :size="'medium'" border v-if="flag" >

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-caret-right"></i>人才编号
          </template>
          {{ personnel.identifier }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>人才姓名
          </template>
          {{ personnel.name }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>手机号
          </template>
          {{ personnel.phone }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>邮箱地址
          </template>
          {{ personnel.email }}
        </el-descriptions-item>


        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>联系地址
          </template>
          {{ personnel.contactAddress }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-sort-up"></i>年龄
          </template>
          {{ personnel.age }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-school"></i>毕业学校
          </template>
          {{ personnel.graduationSchool }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-reading"></i>学历
          </template>
          {{ personnel.education }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-suitcase"></i>期望岗位
          </template>
          {{ personnel.expectPosition }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-help"></i>期望薪资
          </template>
          {{ personnel.expectSalary }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-edit"></i>工作经历
          </template>
          {{ personnel.workCareer }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-timer"></i>工作时长
          </template>
          {{ personnel.workHours }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-share"></i>状态
          </template>
          {{ personnel.statusId === 0?'未入职':'已入职' }}
        </el-descriptions-item>

      </el-descriptions>
    </div>

    <el-card class="box-card" v-for="item in list" :key="item.id" v-if="!flag">
      <div slot="header" class="clearfix">
        <span>{{ item. name}}卡片</span>
      </div>
      <div class="text item">
        {{ item.identifier}}  -- {{ item.name }}
      </div>
      <div class="text item">
        手机号 {{ item.phone}} 邮箱 {{ item.email }}
      </div>
    </el-card>

  </div>
</template>

<script>
import {searchPersonnel,cardPersonnel} from "@/api/core/job/personnel";

export default {
  data(){
    return{
      details:{
        name:'',
        identifier:''
      },
      personnel:{},
      flag:false,
      list:[]
    }
  },
  watch:{
    details: {
      handler(val) {
        if (val.name==='' && val.identifier===''){
          this.flag = false
        }else {
          this.queryPersonnel()
        }
      },
      deep:true
    }
  },
  methods:{
    async queryPersonnel(){
      const {data:res} = await searchPersonnel(this.details)
      this.personnel = res.data.personnel
      this.flag = true
    },
    exportPdf(){
      this.$PDFSave(this.$refs["pdf"], this.personnel.name);
    },
    async cardPerson(){
      const {data:res} =await cardPersonnel()
      this.list = res.data.list
    }
  },
  created() {
    this.cardPerson()
  }
}
</script>

<style scoped>
.el-descriptions{
  width:800px;
  margin-left:400px;
  margin-top:50px;
}
.el-descriptions :not(.is-bordered) .el-descriptions-item__cell{
  height:90px
}
.talentDetails_box{
  margin: 20px 50px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 400px;
  display: inline-block;
  margin-left:50px;
}

</style>
